{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}课程评论-慕学在线网{% endblock %}
{% block custom_css %}
     <link rel="stylesheet" type="text/css" href="{% static ''%}css/reset.css">
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/animate.css">
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/base.css"/>
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/common-less.css"/>
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/course/learn-less.css"/>
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/course/course-comment.css"/>
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/mooc.css"/>
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/base.css">
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/common-less.css">
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/style.css">
    <link rel="stylesheet" type="text/css" href="{% static ''%}css/video-js.min.css">
        <link rel="stylesheet" type="text/css" href="{% static ''%}css/muke/course/common-less.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>
    <style>
        .video-js .vjs-big-play-button {
            top: 50%;
            left: 50%;
        }
    </style>
{% endblock %}

{% block custom_js %}
    <script src="{% static ''%}js/jquery.min.js" type="text/javascript"></script>
    <script src="{% static ''%}js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="{% static ''%}js/video.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //添加评论
    $(document).ready(function() {
        $('#js-pl-submit').on('click', function () {
            var comments = $("#js-pl-textarea").val()
            if (comments == "") {
                alert("评论不能为空")
                return
            }
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'op:comment' %}",
                data: {'course': {{ course.id }}, 'comments': comments},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            alert(data.msg)
                            window.location.href = "{% url 'index' %}";
                        } else {
                            alert(data.msg)
                        }
                    } else if (data.status == 'success') {
                        window.location.reload();//刷新当前页面.
                    }
                },
            });
        });
    });

</script>
{% endblock %}
<!--crumbs start-->
{% block content %}
<section>
    <div class="wp">
        <ul class="crumbs">
            <li><a href="{% url 'index' %}">首页</a>&gt;</li>
            <li><a href="{% url 'course:list' %}">公开课程</a>&gt;</li>
            <li><a href="{% url 'course:detail' course.id %}">{{ course.name }}</a>&gt;</li>
            <li>{{ video.name }}</li>
        </ul>
    </div>
</section>
    <div style="width:1200px;height:675px; margin-left: 340px">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1200"
              poster="http://video-js.zencoder.com/oceans-clip.png"
              data-setup="{}">
            <source src="{{ video.url }}" type='video/mp4'>
        </video>
    </div>
<div class="course-info-main clearfix w has-progress">

    <div class="info-bar clearfix">
        <div class="content-wrap clearfix">
            <div class="content">
                <div class="mod-tab-menu">
                    <ul class="course-menu clearfix">
                        <li><a class="ui-tabs-active " id="learnOn"  href="{% url "course:video" course.id video.id %}"><span>章节</span></a></li>
                        <li><a id="commentOn" class="active" href="{% url 'course:video_comments' course.id %}"><span>评论</span></a></li>
                    </ul>
                </div>

                <!--发布评论-->
                <div id="js-pub-container" class="issques clearfix js-form">
                    <div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
                        <textarea id="js-pl-textarea" class="" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！"></textarea>
                    </div>
                    <input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="发表评论">
                    <p class="global-errortip js-global-error"></p>
                </div>
                 <div id="course_note">
                            <ul class="mod-post" id="comment-list">
                                {% for comment in comments %}
                                    <li class="post-row">
                                        <div class="media">
                                            <span target="_blank"><img src='{{ comment.user.image.url }}' width='40'
                                                                       height='40'/></span>
                                        </div>
                                        <div class="bd">
                                            <div class="tit">
                                                <span target="_blank">{% if comment.user.nick_name %}
                                                    {{ comment.user.nick_name }}{% else %}
                                                    {{ comment.user.username }}{% endif %}</span>
                                            </div>
                                            <p class="cnt">{{ comment.comments }}</p>
                                            <div class="footer clearfix">
                                                <span title="创建时间" class="l timeago">时间：{{ comment.add_time }}</span>
                                            </div>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                            <nav aria-label="Page navigation example" style="position: relative;left: 40%">
                                <ul class="pagination">
                                    {% if comments.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ comments.previous_page_number }}&video_id={{ video.id }}"
                                               aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% for i in   comments.paginator.page_range %}
                                        {% if i == comments.number %}
                                            <li class="page-item active"><a class="page-link"
                                                                            href="?page={{ i }}&video_id={{ video.id }}">{{ i }}</a></li>
                                        {% else %}
                                            <li class="page-item "><a class="page-link" href="?page={{ i }}&video_id={{ video.id }}">{{ i }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                    {% if comments.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ comments.next_page_number }}&video_id={{ video.id }}"
                                               aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>


            </div>
           <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>资料下载</h4>
                        <ul class="downlist">
                            {% for resource in course_resources %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ resource.file.url }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="box mb40">
                        <h4>讲师提示</h4>
                        <div class="teacher-info">
                            <a href="{% url 'org:teacher_detail'   course.teacher.id  %}" target="_blank">
                                <img src='{{ course.teacher.image.url }}' width='80' height='80' />
                            </a>
        <span class="tit">
          <a href="{% url 'org:teacher_detail'   course.teacher.id  %}" target="_blank">{{ course.teacher.name }}</a>
        </span>
                            <span class="job">{{ course.teacher.work_position }}</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.youneed_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么？</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>


                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">该课的同学还学过</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">
                                    {% for course in related_courses %}
                                    <li class="curr">
                                        <a href="{% url 'course:detail' course.id %}" target="_blank">
                                            <img src="{{ course.image.url }}" alt="{{ course.name }}">
                                            <span class="name autowrap">{{ course.name }}</span>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>    </div>
        </div>
        <div class="clear"></div>

    </div>

</div>
{% endblock %}





